<template>
  <div>
    <!-- 三级分类 -->
    <el-card class="m-20" >
      <el-form :inline="true" :disabled="scene==1">
        <el-form-item label="一级分类">

          <el-select v-model="categoryStore.category1Id" placeholder="请选择" @change="getCategory2List">
            <el-option v-for="c1 in categoryStore.category1List" :key="c1.id" :label="c1.name" :value="c1.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="二级分类">

          <el-select v-model="categoryStore.category2Id" placeholder="请选择" @change="getCategory3List">
            <el-option v-for="c2 in categoryStore.category2List" :key="c2.id" :label="c2.name" :value="c2.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="三级分类">
          <el-select v-model="categoryStore.category3Id" placeholder="请选择" @change="attrListData">
            <el-option v-for="c3 in categoryStore.category3List" :key="c3.id" :label="c3.name" :value="c3.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 内容展示 -->
    <div v-show="scene == 0">
      <el-card class="m-20">
        <el-button class="mb-10" type="primary" :disabled="!categoryStore.category3Id" @click="addAttr"
          icon="el-icon-plus">添加属性</el-button>
        <el-table :data="attrList" border>
          <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
          <el-table-column label="属性名" width="160" prop="attrName"></el-table-column>
          <el-table-column label="属性值列表">
            <template #default="{ row, $index }">
              <el-tag class="mr-5" type="success" v-for="attrVal in row.attrValueList" :key="attrVal.id">{{
    attrVal.valueName
}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="140">
            <template #default="{ row, $index }">
              <el-button type="warning" size="small" icon="el-icon-edit" @click="editAttr(row)"></el-button>
              <el-popconfirm :title="`确定永久删除【${row.attrName}】该文件吗`" @onConfirm="deleteAttr(row)" class="ml-10">
                <template #reference>
                  <el-button type="danger" size="small" icon="el-icon-delete"></el-button>
                </template>
              </el-popconfirm>

            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
    <!-- 添加属性 -->
    <div v-show="scene == 1">
      <el-card class="m-20">
        <el-form>
          <el-form-item label="属性名">
            <el-input placeholder="请输入属性名称" v-model="attrForm.attrName" style="width: 200px;"></el-input>
          </el-form-item>
        </el-form>
        <el-button @click="addAttrList" size="small" type="primary" :disabled="!attrForm.attrName">添加属性值</el-button>
        <el-button @click="addcancel" size="small">取消</el-button>
        <el-table :data="attrForm.attrValueList" border class="mt-20 mb-20">
          <el-table-column label="序号" type="index" width="80" align="center"></el-table-column>]
          <el-table-column label="属性值名称">
            <template #default="{ row, $index }">
              <el-input v-if="row.inputVisible" placeholder="输入属性值" ref="inputRef" v-model="row.valueName"
                @blur="inputBlur(row, $index)"></el-input>
              <div v-else @click="inputFocus(row, $index)">{{ row.valueName }}</div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="80">
            <template #default="{ row, $index }">
              <el-button icon="el-icon-delete" type="danger" @click="deleteAttrVal($index)"></el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-button type="primary" @click="saveAttr" :disabled="!(attrForm.attrName && attrForm.attrValueList.length)">保存</el-button>
        <el-button @click="addcancel">取消</el-button>
      </el-card>
    </div>

  </div>
</template>
  
<script>
import CategoryStoreApi from '@/api/category'
import attrApi from '@/api/attr'
import { cloneDeep } from 'lodash';
export default {
  name: 'Attr',
  methods: {
    //一级分类
    async getCategory1List() {
      let res = await CategoryStoreApi.getCategory1List()
      this.categoryStore.category1List = res.data;
    },
    //二级分类
    async getCategory2List() {
      this.category2Id = undefined;
      this.category3Id = undefined;
      this.category2List = [];
      this.category3List = [];
      let res = await CategoryStoreApi.getCategory2List(this.categoryStore.category1Id);

      this.categoryStore.category2List = res.data;
    },
    //三级分类
    async getCategory3List() {

      this.category3Id = undefined;
      this.category3List = [];
      let res = await CategoryStoreApi.getCategory3List(this.categoryStore.category2Id);
      this.categoryStore.category3List = res.data;

    },
    //商品添加
    addAttr() {
      this.scene = 1
    },
    // 初始化数据展示
    async attrListData() {
      let { category1Id, category2Id, category3Id } = this.categoryStore
      let res = await attrApi.attrInfoList(category1Id, category2Id, category3Id)
      this.attrList = res.data
    },
    //编辑
    editAttr(row) {
      this.scene = 1
this.attrForm=cloneDeep(row); // 回显数据
    },
    //删除
    async deleteAttr(row) {
      await attrApi.deleteAttr(row.id)
      this.attrListData()

    },
    //添加
    addAttrList() {


      this.attrForm.attrValueList.push({
        valueName: '', // 目前随便写一个值,不要为空即可,后期回来在改
        inputVisible: true // 用这个数据来控制当前这个对象在表格中切换input的显示状态
      })
    },
    //取消
    addcancel() {
      this.scene = 0
      this.attrForm.attrIdvalId = '',
        this.attrForm.attrName = '',
        this.attrForm.attrValueList = []
    },
    //保存
    async saveAttr() {
      // 收集categoryId的值 - 组装数据
      this.attrForm.categoryId = this.categoryStore.category3Id
      // 调用接口
      let res = await attrApi.saveAttr(this.attrForm)
      console.log(res, '2222222222');
      this.addcancel() //取消
      this.attrListData()//刷新页面

    },
    inputFocus(row) {
      row.inputVisible = true; // 切换input的展示

      nextTick(() => {
        // console.log('DOM更新完毕', inputRef.value )
        inputRef.value?.focus() // 拿到实例进行聚焦
      })
    },
    // input失焦事件
    inputBlur(row, index) {
      row.inputVisible = false

      // 判断输入的内容不能为空
      if (!row.valueName.trim()) {
        attrForm.value.attrValueList.splice(index, 1); // 删除掉这条空数据

        ElMessage.error('输入的内容不能为空')

        return
      }
    },
    // 删除属性值
    deleteAttrVal(index) {
      this.attrForm.attrValueList.splice(index, 1)
    }

  },
  data() {
    return {
      categoryStore: {
        category1Id: undefined,
        category2Id: undefined,
        category3Id: undefined,
        category1List: [],
        category2List: [],
        category3List: [],
      },
      scene: 0,
      attrList: [],//列表数据展示
      attrForm: {
        attrIdvalId: '',
        attrName: '',
        attrValueList: [],
        categoryId: undefined, // 点击保存按钮执行回调的时候再去赋这个值
        categoryLevel: 3, // 写死
        inputVisible: ''
      }

    }
  },
  mounted() {
    this.getCategory1List()
  }
}


</script>
  
<style lang="less" scoped>

</style>